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The objectives of computers and information and communication technolo 





e Definition of certain concepts and Basic operations of the services and 
applications of information and communications technology. 

e Understand some aspects of intellectual security related to the use of information 
and communication technology. 

e The use of instruments of technological production (the language of html - Java 
Script language) to support learning. 

e Producing project (to develop an interactive Web site) using the processes and 
programs and Technological tools. 

e Using technological tools of communication to exchange content and insights 
with others. 

e The use of electronic sources to deal with information. 

e The use of technological tools in data processing, evaluating and reporting the 


results. 
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Lessons 


Unit one :( website). 


Lesson one : the language of HTML -Form - Some tools of the form 


Lesson two : the language of HTML-attached Some tools of the form 


Lesson three : the project 

Unit two (Entrance to the language Java Script) 

Lesson one : Some of the basic concepts of Java Script language 
Lesson two: Call Java Script code. 

Lesson three: Conditional Statement(if Statements) 

Lesson four :To validate the data entered into web page 

Lesson five : attached To validate the data entered into web page 
Lesson six : the project 

Lesson seven(enrichment): HTMLS5 

Unit three : safe use of the Internet 


Lesson :the safe use of the Internet 
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The first topic 


Introduction to HTML (form) 





At the end of the lesson it is expected that the student is able to: 





e Explain the command of HTML markup language. 

e Use HTML the markup language commands to create an interactive Web page. 

e Execute some processes (add a field / Add a button of one alternative selection 
(Radio Button) in the language of HTML. 


e Participate with his colleagues in learning activities. 
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To design form 


Record new user 


Name 


Password 


Confirm password 


Age in numbers 


Gender M F 
The language proficiency E F G 
| Record | | New | 


In order to design the form (as described previously)and enter your data through 
interactive web by using the HTML language 
1. we use the command</form>...<form > , through the form you can Add collection 
of elements to web page such as buttons or fields (Example): 
Make use of them in order to enter your data and send it to The Web site to be 
stored . 
We will describe in these topics various images of some buttons and input fields 


and how to add it to the web page 
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1-Add the fieldname 


In order To add a field to enter the student's name we must add the text box (text) 


which allows visitors to insert Text data by writing it in text box by keyboard. 


1- HTML language 





To add a text box in the Web page we use the following command: 


Activity 


Dear Student: with the help of your teacher and collaboration with colleagues, do 


< input type = "text"> 


the following: 

- Create a new text file. 

. Type the code shown which contains it<input type = "text" >within a form<Form> 
-Save the text file with extension(.htm) 

- Open the file in your Internet browser. 


Code: 


<form> 
The name 
<input type = “text”> 


</form> 
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TextBox Field 





Text Box Field in the web page 


Note: 


The text box has been added to the web page with the possibility of writing inside. 


2-Add the password field 


To add a password input field we must add the password field (password) ,(@) the icon 


appears during writing the password In order to hide the real password components. 


To add the password field in the Web page we use the following command: 


< input type = "password"> 
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Activity 


Dear Student: with the help of your teacher and collaboration with colleagues, do 
the following: 

- Create a new text file. 

. Type the code shown which contains it<input type="password"> within a 
form<Form> 

- Save the text file with extension(.htm) 

- Open the file in your Internet browser. 


Code: 


<form> 
<input type = "password"> 


</form> 


Password 


Password 
Field 





Password Field in the web page 


NOTE: 
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Add an entry password to the Web page field with the possibility of writing inside. 


e We can Similarly Add the Confirm password field. 


3-Add Age field 


With the help of your teacher you can follow the same steps above to add the age 


field to the web page. 


4-Add (a radio button) 


To enter Gender (Male / Female) we add to the web page (Radio Button) to choose 


one alternative which allows you to choose only one of several alternatives. 


Radio Button 





To add the Radio Button to the Web page we use the following command: 


< input type = "Radio "> 


Activity 


Dear Student: with the help of your teacher and collaboration with colleagues, do 
the following: 


- Create a new text file. 
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. Type the code shown which contains it<input type="radio" >within a 
form<Form>this is command is repeated twice to show the male and female variants. 
- Save the text file with extension(.htm) 

- Open the file in your Internet browser. 


Code: 


<form> 


Male <input type = "radio" > 
Female <input type = “radio” > 


</form> 


Radio Button Command Radio Button 
Command 





Activity 


Dear Student: with the help of your teacher and collaboration with colleagues, do 
the following: 
Look for how to overcome the problem of the selection of two buttons together at 


the same time ...........ccccecececececee cececececececececececccecececececececs 
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We note that can be selected two buttons together and to address it (choose only 
one button) is used the Name property and used to determine the names of radio 


Buttons. In order to choose one of two buttons at a time, follow the procedures: 


l- Give a name like “ʻa” to the first radio button 


2- Give the same name “a” to the second radio button 
And so prevents the selection two buttons together as follows Code: 


<form> 
Male <input type = "radio" name="a"> 


Female <input type = "radio" name="a" > 
</form> 







Radio Button Command 





Radio Button 
Command 


Now, could you choose two alternatives together? 
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Remember that 


The form 


You can use it to add collection of elements to web page such as buttons or fields, and 
Make use of them in order to enter your data and send it to The Web site to be stored . 


Text box (text): 


Text box (text) 


It which allows visitors to insert Text data by writing it in the text box by Keyboard. 


The password field 


The icon (@) appears during writing the password In order to hide the real password 


components. 


Radio Button: 


It which allows you to choose only one of several alternatives. 
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Exercises 


First question: Write the scientific term: 


l- You can use it to add collection of elements to web page such as buttons or fields, 
and make use of them in order to enter your data and send it to The Web site to be 


stored . ( ) 
2-It which allows to visitors to insert Text data by writing it in the text box by the 
Keyboard ( ) 
3- The icon (@) appears during writing the password in order to hide the real password 
components. ( ) 
4- It which allows you to choose only one of several alternatives. ( ) 
2- Second question: Match: 


(A) (B) 
1-To add password a)<input type = "radio" > = (.....) 


2-To add (Radio button) b)<input type = “text’>(.....) 
3-To add text inside the form c)<input type = "password">(.....) 


3-Third Question: put (true)on the right statement and (false)on the false statement: 


l- The presence of a form to be sent to the data entered into the Web site to be Stored is 





not required to be on the web page. ( ) 
2- To give the same name to cancel the possibility of selecting two buttons and one 


alternate choice at the same time we use the Name to give the same name to two 


buttons property. ( ) 
3- you can add the text box (Radio)to add a field to enter the name of the student.(  ) 
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The second topic 


Introduction to HTML (form) 


Check box 


To choose which language you speak or more you can add check 
box |_| To the webpage 
e The possibility of choosing more than one choice (at the same time) 





As the following: 


Sy LIL 


e To adda checkbox to the web page using the following command: 
e <input type = "checkbox"> 
Note: You can Dear student repeat the same previous command to 


add more of the selection of the web page. 


Activity 


Dear Student: In collaboration with colleagues and with the help of 


your teacher do the following code: 
<Form> 
<br> 







Check Box 


Arabic <input type = “checkbox''> 






The language proficiency 





English <input type = "“checkbox''> 
French <input type = "checkbox''> 
</form> 
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Command button 


e when you press this button can it will be performed many functions, 
such as recording your data — deleting your data from a survey 


Ok 


e To add button command to the webpage: 
e <input type = "button'> 


Activity 


Dear Student: In collaboration with colleagues and with the help of your teacher 
do the following: 


- Create a new text file. 


.<Form> within a form <input type = "button"> - type the code shown which 
contains it 


.Atml - Save the text file extension 
- Open the file in your Internet explorer 


<Form> 
<input type = "button" value="ok"'> 


</form> Command Button 
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e Dear Student There are three types of buttons that can be added to the model that 
is designed 
It is as follows: 
e |-(button) is used to perform a task being carried out by writing codes 


e 2-(submit )for sending data 
e 3-(reset) for deleting data 


Submit button 


(Submit): by Pressing it you can send your data you have entered through the 
elements of the form by using another property and it is called (action) 


Submit Query 


To add submit to the webpage: use this code: 


Dear Student: In collaboration with colleagues and with the help of your teacher 


<input type = "submit"> 


do the following: 
- Create a new text file. 


. <Form> within a form <input type = “submit'> - Type the code shown which 
contains it 


-html - Save the text file extension | 7 


<form action="process.php'"'> 


<input type = "submit"> 


</form 
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Submit Query 





Reset button 


To delete the values that have already introduced and a return to the values 
assumption. 
For adding reset button to the webpage use the code: 


<input type = "reset'> 
Activity 


Dear Student: In collaboration with colleagues and with the help of your teacher 
do the following: 


- Create a new text file. 


. <Form> within a form <input type = "reset"> - Type the code shown which 
contains it 


.Atml - Save the text file extension 
- Open the file in your Internet browser 
The code: 


<form> 
<input type = "reset''> 


</form> 
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Remember that: 


e when you press this button many function, can be performed such as recording 
your data — deleting your data from a survey 


(Submit): by Pressing it you can send your data you have entered through the 


elements of the form by using another property and it is called (action) 


To delete the values that have already introduced and a return to the values 
assumption. 


For adding reset button to the webpage use the code: 


<input type = "reset''> 
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Exercises 


1-First Question: put (true)on the right statement and (false)on the false statement: 





1-To choose which language you speak, or more than one language you can add check boxes to 


the webpage. ( ) 

2-To select the text that use the (name) property appears on the button. ( ) 
3-(submit button) is used to delete the data written into the input fields. ( ) 
2-Second question complete the following: 

Ferena Button is used to perform a task that can be performed by writing code. 


2-Button .........c.ccccececececseeees used to send data. 
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